<template>
  <div class="function-container">
    <div class="example">
      <h3>是否为PC端:</h3>
      <h4>{{ isPc }}</h4>
    </div>
    <div class="example">
      <h3>判断浏览器是否支持webP格式图片:</h3>
      <h4>{{ isWebP }}</h4>
    </div>
    <div class="example">
      <h3>设备判断 android、ios、web:</h3>
      <h4>{{ isDevice }}</h4>
    </div>
    <div class="example">
      <h4>生成随机数范围:</h4>
      <p>{{ num1 }}</p>
      <button @click="getRandomNum">生成随机数</button>
    </div>
    <div class="example">
      <h4>将阿拉伯数字翻译成中文的大写数字:</h4>
      <p>{{ num2 }}</p>
      <button @click="getNumberToChinese">转为大写数字</button>
    </div>
    <div class="example">
      <h4>获取url参数:</h4>
      <p>{{ url1 }}</p>
      <button @click="getUrlParam">获取url参数</button>
    </div>
    <div class="example">
      <h4>url参数转对象:</h4>
      <p>{{ url2 }}</p>
      <button @click="getParseQueryString">参数转对象</button>
    </div>
    <div class="example">
      <h4>对象序列化【对象转url参数】:</h4>
      <p>{{ url3 }}</p>
      <button @click="getStringfyQueryString">对象序列化</button>
    </div>
    <div class="example">
      <h4>常用正则验证:</h4>
      <el-select>
        <el-option> </el-option>
      </el-select>
      <button @click="isCheckStr">正则验证</button>
    </div>
  </div>
</template>
<script>
import {
  random,
  numberToChinese,
  isPC,
  isSupportWebP,
  parseQueryString,
  stringfyQueryString,
  getUrlParam,
  isDevice,
  checkStr,
} from "@/utils/demo.js"
export default {
  name: "Random",
  data() {
    return {
      num1: "",
      num2: "",
      url: "http://localhost:8083/gddp/car/project/process/instance/list?_t=1670826575&projectId=b368082a-0901-4df8-a2b8-7180624f9e99",
      strList: [
        { valur: "phone", label: "手机号码" },
        { value: "tel", label: "座机" },
        { value: "card", label: "身份证" },
        { value: "pwd", label: "密码" }, // 密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线
        { value: "postal", label: "邮政编码" },
        { value: "QQ", label: "QQ号" },
        { value: "email", label: "邮箱" },
        { value: "money", label: "金额(小数点2位)" },
        { value: "URL", label: "网址" },
        { value: "IP", label: "IP" },
        { value: "date", label: "日期时间" },
        { value: "number", label: "数字" },
        { value: "english", label: "英文" },
        { value: "chinese", label: "中文" },
        { value: "lower", label: "小写" },
        { value: "upper", label: "大写" },
        { value: "HTML", label: "HTML标记" },
      ],
    }
  },
  components: {},
  created() {
    this.getRandomNum()
    this.getNumberToChinese()
    this.getParseQueryString()
    this.getStringfyQueryString()
    this.getUrlParam()
  },
  mounted() {},
  watch: {},
  computed: {
    isPc() {
      return isPC() === true ? "是" : "否"
    },
    isWebP() {
      return isSupportWebP() === true ? "是" : "否"
    },
    isDevice() {
      return isDevice()
    },
  },
  methods: {
    getRandomNum() {
      this.num1 = random(1, 999999)
    },
    getNumberToChinese() {
      this.num2 = numberToChinese(this.num1)
    },
    getUrlParam() {
      this.url1 = getUrlParam(this.url)
    },
    getParseQueryString() {
      this.url2 = parseQueryString(this.url)
    },
    getStringfyQueryString() {
      this.url3 = stringfyQueryString(this.url2)
    },
  },
}
</script>
<style scoped lang="scss">
.function-container {
  margin: 10px;
  .example {
    display: flex;
    align-items: center;
    h3,
    h4 {
      margin-right: 10px;
    }
    p {
      margin-right: 20px;
    }
  }
}
</style>
